import 'package:flutter/material.dart';
import 'package:flutter_wan_android/arch/net/http_manager.dart';
import 'package:flutter_wan_android/arch/net/result_data.dart';
import 'package:flutter_wan_android/arch/ui/toast.dart';
import 'package:flutter_wan_android/common/api.dart';
import 'package:flutter_wan_android/model/navi_data.dart';
import 'package:flutter_wan_android/res/colors.dart';
import 'package:flutter_wan_android/res/theme.dart';
import 'package:flutter_wan_android/routes/route_util.dart';
import 'package:flutter_wan_android/routes/routes.dart';
import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';

class SystemNavi extends StatefulWidget {
  @override
  _SystemNaviState createState() => _SystemNaviState();
}

class _SystemNaviState extends State<SystemNavi>
    with AutomaticKeepAliveClientMixin {
  List<NaviData> navi = [];

  ItemScrollController  _controller = ItemScrollController();

  var currentIndex = 0;

  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    _getData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: wTheme.listItemBg,
      child: Row(
        children: [
          Expanded(flex: 2, child: _getLeftList()),
          Container(
            color: wTheme.txItemBg,
            width: 1,
          ),
          Expanded(
              flex: 5,
              child: Padding(
                padding: EdgeInsets.all(10),
                child: _getRightList(),
              )),
        ],
      ),
    );
  }

  _getData() async {
    ResultData result = await HttpManager.instance().get(Api.NAVI);

    if (result.success) {
      setState(() {
        navi = getNaviDataList(result.data);
      });
    } else {
      ToastUtil.show(result.msg);
    }
  }

  /// 左侧列表
  _getLeftList() {
    if (navi.isEmpty) return Container();

    return ListView.separated(
      itemBuilder: (BuildContext context, int index) {
        return Container(
          height: 50,
          width: double.infinity,
          child: GestureDetector(
            onTap: () {
              _controller.scrollTo(index: index, duration: Duration(milliseconds: 200));
              setState(() {
                currentIndex = index;
              });
            },
            child:Container(
              child: Center(
                child: Text(
                  navi[index].name,
                  style: TextStyle(fontSize: 15, color: _getColor(index)),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  textAlign: TextAlign.center,
                ),
              ),
            ),
          ),
        );
      },
      separatorBuilder: (BuildContext context, int index) {
        return Container(
          height: 1,
          color: wTheme.txItemBg,
        );
      },
      itemCount: navi.length,
    );
  }

  _getColor(int index) {
    if (currentIndex == index) return WColor.blue1;
    return wTheme.text1;
  }

  /// 右侧列表
  _getRightList() {
    if (navi.isEmpty) return Container();

    return ScrollablePositionedList.separated(
      itemScrollController: _controller,
      separatorBuilder: (BuildContext context, int index) {
        return Container(height: 30);
      },
      itemCount: navi.length,
      itemBuilder: (BuildContext context, int index) {
        NaviData item = navi[index];

        var child = item.articles.map<Widget>((e) {
          return GestureDetector(
            onTap: () {
              RouteUtil.push(
                context,
                Routes.web,
                params: {"url": e.link, "title": e.title},
              );
            },
            child: Container(
              padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(4)),
                color: wTheme.txItemBg,
              ),
              child: Text(
                e.title ?? "",
                style: TextStyle(fontSize: 13, color: wTheme.text1),
              ),
            ),
          );
        }).toList();

        return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          Text(
            item.name,
            style: TextStyle(fontSize: 16, color: wTheme.text1),
          ),
          Padding(padding: EdgeInsets.only(top: 10)),
          Wrap(
            spacing: 10,
            runSpacing: 15,
            children: child,
          )
        ]);
      },
      // itemCount: navi.length,
    );
  }
}
